<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('基础示例')}`">{{ $t('基础示例') }}</t>
            <li>
                <span class="d-code">props</span>用来指定树节点名称所对应的字段编码、
                树节点选择框禁用状态对应的字段编码、
                子节点对应的字段编码等，
                详情请查阅下方配置表；
            </li>
            <li>
                <span class="d-code">node-key</span>为树节点的唯一键，组件内默认取每个节点的<span class="s-code">"id"</span>。
                若节点数据内不存在<span class="s-code">"id"</span>，那么需要传入<span class="d-code">node-key</span>来声明树节点的唯一键
            </li>
        </template>
        <sib-tree :props="props" node-key="id" :data="treeData" style="height: 200px;"></sib-tree>
    </example>
</template>

<script>

export default {
    setup() {
        return {
            props: {
                children: 'children',
                label: 'name',
                disabled: 'disabled',
                isLeaf: 'isLeaf',
            },
            treeData: [
                {
                    id: 1,
                    name: '一级 1',
                    children: [
                        {
                            id: 4,
                            name: '二级 1-1',
                            children: [
                                {
                                    id: 9,
                                    name: '三级 1-1-1',
                                },
                                {
                                    id: 10,
                                    name: '三级 1-1-2',
                                },
                            ],
                        },
                    ],
                },
                {
                    id: 2,
                    name: '一级 2',
                    children: [
                        {
                            id: 5,
                            name: '二级 2-1',
                        },
                        {
                            id: 6,
                            name: '二级 2-2',
                        },
                    ],
                },
                {
                    id: 3,
                    name: '一级 3',
                    children: [
                        {
                            id: 7,
                            name: '二级 3-1',
                        },
                        {
                            id: 8,
                            name: '二级 3-2',
                            children: [
                                {
                                    id: 11,
                                    name: '三级 3-2-1',
                                },
                                {
                                    id: 12,
                                    name: '三级 3-2-2',
                                },
                                {
                                    id: 13,
                                    name: '三级 3-2-3',
                                },
                            ],
                        },
                    ],
                },
            ],
            templateString: `<template>
    <div class="example-box">
        <sib-tree :props="props" node-key="id" :data="treeData" style="height: 200px;"></sib-tree>
    </div>
</template>

<script>
export default {
    setup() {
        return {
            props: {
                children: 'children',
                label: 'name',
                disabled: 'disabled',
                isLeaf: 'isLeaf',
            },
            treeData: [
                {
                    id: 1,
                    name: '一级 1',
                    children: [
                        {
                            id: 4,
                            name: '二级 1-1',
                            children: [
                                { id: 9, name: '三级 1-1-1' },
                                { id: 10, name: '三级 1-1-2' },
                            ],
                        },
                    ],
                },
                {
                    id: 2,
                    name: '一级 2',
                    children: [
                        { id: 5, name: '二级 2-1' },
                        { id: 6, name: '二级 2-2' },
                    ],
                },
                {
                    id: 3,
                    name: '一级 3',
                    children: [
                        { id: 7, name: '二级 3-1' },
                        {
                            id: 8,
                            name: '二级 3-2',
                            children: [
                                { id: 11, name: '三级 3-2-1' },
                                { id: 12, name: '三级 3-2-2' },
                                { id: 13, name: '三级 3-2-3' },
                            ],
                        },
                    ],
                },
            ],
        };
    },
};
<\/script>`,
        };
    },
};
</script>
